<template>
    <div class="class-wrapper">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-tree ref="trees" :data="data2" :props="defaultProps" :expand-on-click-node="false" show-checkbox default-expand-all :render-content="renderContent" >
        </el-tree>
    </div>
</template>

<script>
let id = 1000;

// function displayProp (obj) {
//     // 获取对象方法
//     for (var i in obj) {
//         if (obj.hasOwnProperty(i) && typeof obj[i] === 'function') {
//             console.log('对象方法: ', i, '=', obj[i]);
//         }
//     }
//
//     // 获取对象属性
//     for (var j in obj) {
//         if (obj.hasOwnProperty(j) && typeof obj[j] !== 'function') {
//             console.log('对象属性: ', j);
//         }
//     }
// }

// function ArrFind (v, index, equalValue, t) {
//     if (v === equalValue) {
//         console.log('ArrFind index=', index);
//         if (v.children) {
//             console.log('v.children yes');
//             v.children.push({ id: id++, label: 'testtest' });
//         } else {
//             console.log('v.children no');
//             v.children = [];
//             v.children.push({id: id++, label: 'testtest'});
//             console.log('v=', v);
//         }
//         return true;
//     } else if (v.children && v.children.length > 0) {
//         v.children.find((v, index) => { ArrFind(v, index, equalValue); });
//     }
// }

export default {
    data () {
        return {
            data2: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 11,
                    label: '一级 11',
                    children: []
                }, {
                    id: 12,
                    label: '一级 12'
                }]
            }, {
                id: 2,
                label: '一级 2'
            }, {
                id: 3,
                label: '一级 3'
            }],
            baseId: 1000,
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    methods: {
        add (store, data, node) {
            console.log('data=', data);
            console.log('store=', store);
            console.log('node=', node);
            //   if (data.children) {
            //       data.children.push({ id: id++, label: 'testtest', children: [] });
            //   } else {
            //       data.children = [{ id: id++, label: 'testtest', children: [] }];
            //   }
            // displayProp(store);
            let a = { id: id++, label: 'testtest', children: [] };
            node.insertChild({a});
            // console.log('this.$refs.trees======', this.$refs.trees.store);
            this.$refs.trees.store.root.childNodes[1].insertChild({a});
            this.$refs.trees.store.append({ id: id++, label: 'testtest', children: [] }, data);
            // store.append({id: id++, label: 'testtest', children: []});
            // store.data.find((v, index) => { ArrFind(v, index, data, store.data); });
            // store.data.push({ id: id++, label: 'testtest', children: [] });
            //   data.children({ id: id++, label: 'testtest', children: [] }, data);
        },
        remove (store, data) {
            // console.log(store);
            console.log('data=', data);
            //   console.log(store.data.indexOf('$treeNodeId' === data.$treeNodeId));
            //   store.data.indexOf('$treeNodeId' == data.$treeNodeId)
            //   store.remove(data);
            //   store.data.splice(data.$treeNodeId -  1, 1);
        },
        renderContent (h, {node, data, store}) {
            let self = this;
            console.log('store=', store);
            console.log('node=', node);
            return (
                <span>
                    <span><span> { node.label } </span></span >
                    <span style = "float: right; margin-right: 20px">
                    <el-button size="mini" on-click= {() => self.add(store, data, node) }>增加</el-button>
                    <el-button size="mini" on-click= {() => self.remove(store, data) }>删除</el-button>< /span>
                </span>
            );
            // return h(
            //     'span',
            //     [
            //         h('span', node.label),
            //         h('span', {attrs: {style: 'float: right; margin-right: 20px'}}, [
            //             h('el-button', {attrs: {size: 'mini'}, on: {click: function () { console.log('点击节点'); store.append({ id: self.baseId++, label: 'testtest', children: [] }, data); }}}, '添加')
            //         ])
            //     ]
            // );
        }
    }
};
</script>
